<template>
	<div id="tmp1">
		<!-- 1.0实现的是图片详情和缩略图 -->
		<div id="desc">
			<div class="title">
				<h4>{{photoinfo.title}}</h4>
				<p class="smatitle">
					{{photoinfo.add_time | datafmt('YYYY-MM-DD HH:mm:ss')}}  {{photoinfo.click}}次浏览
				</p>
				<p class="line"></p>
			</div>
			<div class="mui-content">
	        <ul class="mui-table-view mui-grid-view mui-grid-9">
	            <li v-for="(item, index) in list" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <a href="#"><img class="preview-img"  :src="item.src" height="100" @click="$preview.open(index, list)">
                    </a>
                </li>
	        </ul> 
		</div>

		<!-- 图片详情  摘要部分 -->
		<p v-html='photoinfo.content'></p>
		</div>
		<!-- 2.0集成评论组件 -->
		<div id="comment">
			<comment :id='id'></comment>
		</div>
	</div>
</template>

<script>
import common from '../../kits/common.js'
import comment from '../subcom/comment.vue'
import { Toast } from 'mint-ui';
	export default{
		components:{
			comment    //注册评论组件
		},
		data(){
			return{
				id:0, //图片的Id
				photoinfo:{},
				list: []
			}
		},
		created(){
			this.id = this.$route.params.id;
			this.getphoto();
			this.getsmallphoto();
		},
		methods:{

			getsmallphoto(){
				var url = common.apidomain + '/api/getthumimages/' + this.id;
				this.$http.get(url).then(function(res){
					var data = res.body;
					if(data.status != 0){
						Toast(data.message);
					}
					// 由于vue-preview要求的数据格式是带宽高的，所以要自己添加
					data.message.forEach(function(item){
						var img = document.createElement('img');
						img.src = item.src;
						item.h = img.height;
						item.w = img.width;
					})

					this.list = data.message;
				})
			},

			//1.0获取图片
			getphoto(){
				var url = common.apidomain + '/api/getimageInfo/' + this.id;
				this.$http.get(url).then(function(res){
						var data = res.body;
						if(data.status != 0){
							Toast(data.message);
							return;
						}
						this.photoinfo = data.message[0];
				})

			}
		}
	}
</script>

<style scoped>
	#desc{
		padding:10px;
	}
	#desc h4{
		text-align: left;
		color:#0094ff;
		line-height: 30px;
	}
	#desc .smatitle{
		text-align: left;
		color:#ccc;
		margin-top:5px;
	}
	.line{
		width:100%;
		height: 0px;
		border-bottom:1px solid #999;
	}
	.mui-grid-view.mui-grid-9 .mui-table-view-cell {
	    border-right: 0px;
	    border-bottom: 0px;
	}
	.mui-grid-view.mui-grid-9 {
	    border-top: 0px;
	    border-left: 0px;
	}
	.mui-grid-view.mui-grid-9 img{
		width:100%;
	}
</style>